<template>
  <div class="main">
    <el-card shadow="never">
      <!-- 统计概览 -->
      <div class="stats-overview mb-6">
        <el-row :gutter="20">
          <el-col v-for="stat in statisticsData" :key="stat.key" :span="3">
            <div class="stat-card">
              <div class="stat-icon" :style="{ backgroundColor: stat.color }">
                <el-icon><component :is="stat.icon" /></el-icon>
              </div>
              <div class="stat-content">
                <div class="stat-value">{{ stat.value }}</div>
                <div class="stat-label">{{ stat.label }}</div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>

      <!-- 搜索筛选区域 -->
      <div class="search-form mb-4">
        <el-form :model="searchForm" inline>
          <el-form-item label="订单号">
            <el-input
              v-model="searchForm.orderNo"
              placeholder="请输入订单号"
              clearable
              style="width: 200px"
            />
          </el-form-item>
          <el-form-item label="用户信息">
            <el-input
              v-model="searchForm.userName"
              placeholder="用户名/用户ID"
              clearable
              style="width: 200px"
            />
          </el-form-item>
          <el-form-item label="下单时间">
            <el-date-picker
              v-model="searchForm.dateRange"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              format="YYYY-MM-DD HH:mm:ss"
              value-format="YYYY-MM-DDTHH:mm:ss[Z]"
              style="width: 350px"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch">搜索</el-button>
            <el-button @click="handleReset">重置</el-button>
            <el-button type="success" @click="handleExport">导出</el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 订单状态Tabs -->
      <div class="order-status-tabs mb-4">
        <el-tabs v-model="activeTabStatus" @tab-change="handleTabChange">
          <el-tab-pane label="全部订单" name="0">
            <template #label>
              <span>全部订单</span>
            </template>
          </el-tab-pane>
          <el-tab-pane name="1">
            <template #label>
              <span>待付款 ({{ statusCounts["1"] || 0 }})</span>
            </template>
          </el-tab-pane>
          <el-tab-pane name="3">
            <template #label>
              <span>待发货 ({{ statusCounts["3"] || 0 }})</span>
            </template>
          </el-tab-pane>
          <el-tab-pane name="4">
            <template #label>
              <span>待收货 ({{ statusCounts["4"] || 0 }})</span>
            </template>
          </el-tab-pane>
          <el-tab-pane name="5">
            <template #label>
              <span>已完成</span>
            </template>
          </el-tab-pane>
        </el-tabs>
      </div>

      <!-- 批量操作栏 -->
      <div v-if="selectedOrders.length > 0" class="batch-operations mb-4">
        <el-alert :title="`已选择 ${selectedOrders.length} 个订单`" type="info" show-icon :closable="false">
          <template #default>
            <el-button-group>
              <el-button size="small" @click="handleBatchShip">批量发货</el-button>
              <el-button size="small" @click="handleBatchCancel">批量取消</el-button>
              <el-button size="small" @click="handleBatchUpdateStatus">批量改状态</el-button>
            </el-button-group>
          </template>
        </el-alert>
      </div>

      <!-- 订单列表 -->
      <el-table
        v-loading="loading"
        :data="orderList"
        :row-key="row => row.id"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="orderNo" label="订单号" width="180" fixed="left">
          <template #default="{ row }">
            <el-link type="primary" @click="viewOrderDetail(row)">
              {{ row.orderNo }}
            </el-link>
          </template>
        </el-table-column>
        <el-table-column prop="userName" label="用户信息" width="120">
          <template #default="{ row }">
            <div>{{ row.userName }}</div>
            <div class="text-gray-500 text-xs">ID: {{ row.userId }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="total_amount" label="订单总金额" width="200" />
        <el-table-column prop="pay_amount" label="实付金额" width="120" sortable>
          <template #default="{ row }">
            <div class="font-semibold text-red-600">¥{{ row.pay_amount }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="订单状态" width="100">
          <template #default="{ row }">
            <el-tag :type="getStatusType(row.status)">
              {{ row.status_text }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="paymentMethod" label="支付方式" width="100" />
        <el-table-column prop="createTime" label="下单时间" width="160" sortable>
          <template #default="{ row }">
            {{ formatDateTime(row.createTime) }}
          </template>
        </el-table-column>
        <el-table-column prop="logistics" label="物流信息" width="150">
          <template #default="{ row }">
            <div v-if="row.logistics?.company">
              <div class="text-sm">{{ row.logistics?.company }}</div>
              <div class="text-xs text-gray-500">
                {{ row.logistics.trackingNumber }}
              </div>
            </div>
            <span v-else class="text-gray-400">暂无</span>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" width="120" />
        <el-table-column prop="adminRemark" label="管理备注" width="120">
          <template #default="{ row }">
            <el-tooltip :content="row.adminRemark || '暂无备注'" placement="top">
              <span class="cursor-pointer text-blue-600" @click="editRemark(row)">
                {{ row.adminRemark || "添加备注" }}
              </span>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="250" fixed="right">
          <template #default="{ row }">
            <el-button-group>
              <el-button size="small" type="primary" @click="viewOrderDetail(row)"> 详情 </el-button>
              <el-button v-if="row.status === 3" size="small" type="success" @click="handleShipOrder(row)">
                发货
              </el-button>
              <el-button
                v-if="row.status <= 3 && row.status !== 6"
                size="small"
                type="warning"
                @click="handleCancelOrder(row)"
              >
                取消
              </el-button>
              <el-button size="small" @click="viewOrderLogs(row)"> 日志 </el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container mt-4">
        <el-pagination
          v-model:current-page="pagination.page"
          v-model:page-size="pagination.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="pagination.total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- 订单详情模态框 -->
    <el-dialog v-model="showDetailModal" title="订单详情" width="80%" :before-close="closeDetailModal">
      <OrderDetail v-if="showDetailModal" :order-id="currentOrderId" @refresh="getOrders" />
    </el-dialog>

    <!-- 发货模态框 -->
    <el-dialog v-model="showShipModal" title="订单发货" width="600px" :before-close="closeShipModal">
      <el-form ref="shipFormRef" :model="shipForm" :rules="shipRules" label-width="100px">
        <el-form-item label="物流公司" prop="logisticsCompany">
          <el-select v-model="shipForm.logisticsCompany" placeholder="请选择物流公司">
            <el-option label="顺丰速运" value="顺丰速运" />
            <el-option label="中通快递" value="中通快递" />
            <el-option label="韵达快递" value="韵达快递" />
            <el-option label="申通快递" value="申通快递" />
            <el-option label="圆通速递" value="圆通速递" />
            <el-option label="百世快递" value="百世快递" />
          </el-select>
        </el-form-item>
        <el-form-item label="快递单号" prop="trackingNumber">
          <el-input v-model="shipForm.trackingNumber" placeholder="请输入快递单号" />
        </el-form-item>
        <el-form-item label="发货备注">
          <el-input
            v-model="shipForm.remark"
            type="textarea"
            :rows="3"
            placeholder="请输入发货备注（可选）"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="closeShipModal">取消</el-button>
        <el-button type="primary" @click="confirmShip">确认发货</el-button>
      </template>
    </el-dialog>

    <!-- 批量发货模态框 -->
    <el-dialog
      v-model="showBatchShipModal"
      title="批量发货"
      width="800px"
      :before-close="closeBatchShipModal"
    >
      <div class="mb-4">
        <el-alert
          :title="`将为 ${selectedOrders.length} 个订单进行发货操作`"
          type="warning"
          show-icon
          :closable="false"
        />
      </div>
      <el-table :data="batchShipList" max-height="400">
        <el-table-column prop="orderNo" label="订单号" width="150" />
        <el-table-column prop="userName" label="用户" width="100" />
        <el-table-column label="物流公司" width="150">
          <template #default="{ row }">
            <el-select v-model="row.logisticsCompany" size="small">
              <el-option label="顺丰速运" value="顺丰速运" />
              <el-option label="中通快递" value="中通快递" />
              <el-option label="韵达快递" value="韵达快递" />
              <el-option label="申通快递" value="申通快递" />
              <el-option label="圆通速递" value="圆通速递" />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="快递单号" width="180">
          <template #default="{ row }">
            <el-input v-model="row.trackingNumber" size="small" placeholder="请输入快递单号" />
          </template>
        </el-table-column>
        <el-table-column label="备注">
          <template #default="{ row }">
            <el-input v-model="row.remark" size="small" placeholder="发货备注" />
          </template>
        </el-table-column>
      </el-table>
      <template #footer>
        <el-button @click="closeBatchShipModal">取消</el-button>
        <el-button type="primary" @click="confirmBatchShip">确认批量发货</el-button>
      </template>
    </el-dialog>

    <!-- 备注编辑模态框 -->
    <el-dialog v-model="showRemarkModal" title="编辑订单备注" width="500px">
      <el-input
        v-model="currentRemark"
        type="textarea"
        :rows="4"
        placeholder="请输入订单备注"
        maxlength="200"
        show-word-limit
      />
      <template #footer>
        <el-button @click="showRemarkModal = false">取消</el-button>
        <el-button type="primary" @click="saveRemark">保存</el-button>
      </template>
    </el-dialog>

    <!-- 订单日志模态框 -->
    <el-dialog v-model="showLogsModal" title="订单日志" width="700px">
      <el-timeline>
        <el-timeline-item
          v-for="log in currentOrderLogs"
          :key="log.id"
          :timestamp="formatDateTime(log.createTime)"
          placement="top"
        >
          <el-card>
            <h4>{{ log.operationName }}</h4>
            <p>操作人：{{ log.operatorName }}</p>
            <p v-if="log.remark">备注：{{ log.remark }}</p>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, computed } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { Document, Money, Box, CircleCheck, CircleClose, User, CreditCard } from "@element-plus/icons-vue";
import {
  getOrdersList,
  getOrderDetail,
  updateOrderStatus,
  batchUpdateOrderStatus,
  updateOrderRemark,
  shipOrder,
  batchShipOrders,
  getOrderLogs,
  exportOrders,
  getOrderStatistics,
  cancelOrder,
  OrderStatus
} from "@/api/order-management";
import OrderDetail from "./components/OrderDetail.vue";

defineOptions({
  name: "OrderManagement"
});
// 响应式数据
const loading = ref(false);
const orderList = ref([]);
const selectedOrders = ref([]);
const currentOrderId = ref(null);
const currentOrderLogs = ref([]);

// 搜索表单
const searchForm = reactive({
  orderNo: "",
  userName: "",
  status: "0", // 默认全部订单
  dateRange: null
});

// Tabs 激活状态
const activeTabStatus = ref("0"); // 默认选中“全部订单”

// 各状态订单数量
const statusCounts = reactive({
  "0": 0, // 全部订单
  "1": 0, // 待付款
  "3": 0, // 待发货
  "4": 0, // 待收货 (已发货)
  "5": 0 // 已完成
});

// 分页数据
const pagination = reactive({
  page: 1,
  pageSize: 10,
  total: 0
});

// 模态框控制
const showDetailModal = ref(false);
const showShipModal = ref(false);
const showBatchShipModal = ref(false);
const showRemarkModal = ref(false);
const showLogsModal = ref(false);

// 发货表单
const shipFormRef = ref();
const shipForm = reactive({
  logisticsCompany: "",
  trackingNumber: "",
  remark: ""
});

const shipRules = {
  logisticsCompany: [{ required: true, message: "请选择物流公司", trigger: "change" }],
  trackingNumber: [{ required: true, message: "请输入快递单号", trigger: "blur" }]
};

// 批量发货数据
const batchShipList = ref([]);

// 备注编辑
const currentRemark = ref("");
const currentRemarkOrderId = ref(null);

// 统计数据
const statisticsData = ref([]);

// 获取订单列表
const getOrders = async () => {
  loading.value = true;
  try {
    const params = {
      page: pagination.page,
      pageSize: pagination.pageSize,
      orderNo: searchForm.orderNo,
      userName: searchForm.userName,
      status: searchForm.status,
      ...(searchForm.dateRange && {
        startTime: searchForm.dateRange[0],
        endTime: searchForm.dateRange[1]
      })
    };

    const res = await getOrdersList(params);
    if (res.code === 200) {
      orderList.value = res.rows || [];
      console.log("订单列表:", res);
      pagination.total = res.total || 0;
    }
  } catch (error) {
    console.error("获取订单列表失败:", error);
    ElMessage.error("获取订单列表失败");
  } finally {
    loading.value = false;
  }
};

// 获取统计数据
const getStatistics = async () => {
  try {
    const res = await getOrderStatistics();
    if (res.code === 200) {
      const data = res.data;
      statisticsData.value = [
        {
          key: "total",
          label: "总订单",
          value: data.totalOrders,
          icon: Document,
          color: "#409EFF"
        },
        {
          key: "pendingPayment",
          label: "待付款",
          value: data.pendingPayment,
          icon: CreditCard,
          color: "#E6A23C"
        },
        {
          key: "pendingShipment",
          label: "待发货",
          value: data.pendingShipment,
          icon: Box,
          color: "#F56C6C"
        },
        {
          key: "shipped",
          label: "已发货",
          value: data.shipped,
          icon: CircleCheck,
          color: "#67C23A"
        },
        {
          key: "completed",
          label: "已完成",
          value: data.completed,
          icon: CircleCheck,
          color: "#909399"
        },
        {
          key: "cancelled",
          label: "已取消",
          value: data.cancelled,
          icon: CircleClose,
          color: "#F56C6C"
        },
        {
          key: "totalAmount",
          label: "总金额",
          value: `¥${data.totalAmount}`,
          icon: Money,
          color: "#67C23A"
        },
        {
          key: "paidAmount",
          label: "已付金额",
          value: `¥${data.paidAmount}`,
          icon: Money,
          color: "#409EFF"
        }
      ];

      // 更新Tab状态数量
      statusCounts["0"] = data.totalOrders;
      statusCounts["1"] = data.pendingPayment;
      statusCounts["3"] = data.pendingShipment;
      statusCounts["4"] = data.shipped; // 已发货对应待收货
      statusCounts["5"] = data.completed;
    }
  } catch (error) {
    console.error("获取统计数据失败:", error);
  }
};

// Tab 切换处理
const handleTabChange = name => {
  searchForm.status = name;
  pagination.page = 1;
  getOrders();
};

// 搜索处理
const handleSearch = () => {
  activeTabStatus.value = "0"; // 搜索时重置到全部订单Tab
  searchForm.status = "0";
  pagination.page = 1;
  getOrders();
};

// 重置搜索
const handleReset = () => {
  Object.assign(searchForm, {
    orderNo: "",
    userName: "",
    status: "0",
    dateRange: null
  });
  pagination.page = 1;
  getOrders();
};

// 导出订单
const handleExport = async () => {
  try {
    const params = {
      orderNo: searchForm.orderNo,
      userName: searchForm.userName,
      status: searchForm.status,
      ...(searchForm.dateRange && {
        startTime: searchForm.dateRange[0],
        endTime: searchForm.dateRange[1]
      })
    };

    const res = await exportOrders(params);
    if (res.code === 200) {
      ElMessage.success("导出成功");
      // 这里应该触发文件下载
    }
  } catch (error) {
    console.error("导出失败:", error);
    ElMessage.error("导出失败");
  }
};

// 选择变化处理
const handleSelectionChange = selection => {
  selectedOrders.value = selection;
};

// 分页处理
const handleSizeChange = val => {
  pagination.pageSize = val;
  pagination.page = 1;
  getOrders();
};

const handleCurrentChange = val => {
  pagination.page = val;
  getOrders();
};

// 获取状态标签类型
const getStatusType = status => {
  const statusTypes = {
    1: "warning", // 待付款
    2: "info", // 已付款
    3: "danger", // 待发货
    4: "primary", // 已发货
    5: "success", // 已完成
    6: "info" // 已取消
  };
  return statusTypes[status] || "info";
};

// 格式化日期时间
const formatDateTime = dateStr => {
  if (!dateStr) return "-";
  return new Date(dateStr).toLocaleString("zh-CN");
};

// 查看订单详情
const viewOrderDetail = order => {
  currentOrderId.value = order.id;
  console.log("查看订单详情，订单ID:", currentOrderId.value);
  showDetailModal.value = true;
};

// 关闭详情模态框
const closeDetailModal = () => {
  showDetailModal.value = false;
  currentOrderId.value = null;
};

// 发货处理
const handleShipOrder = order => {
  currentOrderId.value = order.id;
  Object.assign(shipForm, {
    logisticsCompany: "",
    trackingNumber: "",
    remark: ""
  });
  showShipModal.value = true;
};

// 关闭发货模态框
const closeShipModal = () => {
  showShipModal.value = false;
  currentOrderId.value = null;
  shipFormRef.value?.resetFields();
};

// 确认发货
const confirmShip = async () => {
  const valid = await shipFormRef.value?.validate();
  if (!valid) return;

  try {
    const res = await shipOrder(currentOrderId.value, shipForm);
    if (res.code === 200) {
      ElMessage.success("发货成功");
      closeShipModal();
      getOrders();
      getStatistics();
    } else {
      ElMessage.error(res.message || "发货失败");
    }
  } catch (error) {
    console.error("发货失败:", error);
    ElMessage.error("发货失败");
  }
};

// 批量发货
const handleBatchShip = () => {
  const pendingShipOrders = selectedOrders.value.filter(order => order.status === 3);
  if (pendingShipOrders.length === 0) {
    ElMessage.warning("请选择待发货的订单");
    return;
  }

  batchShipList.value = pendingShipOrders.map(order => ({
    orderId: order.id,
    orderNo: order.orderNo,
    userName: order.userName,
    logisticsCompany: "",
    trackingNumber: "",
    remark: ""
  }));

  showBatchShipModal.value = true;
};

// 关闭批量发货模态框
const closeBatchShipModal = () => {
  showBatchShipModal.value = false;
  batchShipList.value = [];
};

// 确认批量发货
const confirmBatchShip = async () => {
  // 验证必填字段
  const incompleteOrders = batchShipList.value.filter(
    order => !order.logisticsCompany || !order.trackingNumber
  );

  if (incompleteOrders.length > 0) {
    ElMessage.warning("请完善所有订单的物流信息");
    return;
  }

  try {
    const res = await batchShipOrders(batchShipList.value);
    if (res.code === 200) {
      ElMessage.success("批量发货成功");
      closeBatchShipModal();
      getOrders();
      getStatistics();
      selectedOrders.value = [];
    } else {
      ElMessage.error(res.message || "批量发货失败");
    }
  } catch (error) {
    console.error("批量发货失败:", error);
    ElMessage.error("批量发货失败");
  }
};

// 批量取消
const handleBatchCancel = () => {
  const canCancelOrders = selectedOrders.value.filter(order => order.status <= 3 && order.status !== 6);

  if (canCancelOrders.length === 0) {
    ElMessage.warning("请选择可取消的订单");
    return;
  }

  ElMessageBox.prompt("请输入取消原因", "批量取消订单", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    inputPlaceholder: "请输入取消原因"
  }).then(async ({ value }) => {
    try {
      const orderIds = canCancelOrders.map(order => order.id);
      const res = await batchUpdateOrderStatus(orderIds, OrderStatus.CANCELLED, value);
      if (res.code === 200) {
        ElMessage.success("批量取消成功");
        getOrders();
        getStatistics();
        selectedOrders.value = [];
      }
    } catch (error) {
      console.error("批量取消失败:", error);
      ElMessage.error("批量取消失败");
    }
  });
};

// 批量更新状态
const handleBatchUpdateStatus = () => {
  ElMessageBox.prompt("请选择要更新的状态", "批量更新状态", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    inputType: "select",
    inputOptions: [
      { label: "已付款", value: "2" },
      { label: "待发货", value: "3" },
      { label: "已发货", value: "4" },
      { label: "已完成", value: "5" },
      { label: "已取消", value: "6" }
    ]
  } as any).then(async ({ value }) => {
    // 临时使用 as any 解决类型问题，后续可以考虑更优雅的解决方案
    try {
      const orderIds = selectedOrders.value.map(order => order.id);
      const res = await batchUpdateOrderStatus(orderIds, parseInt(value));
      if (res.code === 200) {
        ElMessage.success("批量更新成功");
        getOrders();
        getStatistics();
        selectedOrders.value = [];
      }
    } catch (error) {
      console.error("批量更新失败:", error);
      ElMessage.error("批量更新失败");
    }
  });
};

// 取消订单
const handleCancelOrder = order => {
  ElMessageBox.prompt("请输入取消原因", "取消订单", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    inputPlaceholder: "请输入取消原因"
  }).then(async ({ value }) => {
    try {
      const res = await cancelOrder(order.id, value);
      if (res.code === 200) {
        ElMessage.success("订单取消成功");
        getOrders();
        getStatistics();
      }
    } catch (error) {
      console.error("取消订单失败:", error);
      ElMessage.error("取消订单失败");
    }
  });
};

// 编辑备注
const editRemark = order => {
  currentRemarkOrderId.value = order.id;
  currentRemark.value = order.adminRemark || "";
  showRemarkModal.value = true;
};

// 保存备注
const saveRemark = async () => {
  try {
    const res = await updateOrderRemark(currentRemarkOrderId.value, currentRemark.value);
    if (res.code === 200) {
      ElMessage.success("备注更新成功");
      showRemarkModal.value = false;
      getOrders();
    }
  } catch (error) {
    console.error("更新备注失败:", error);
    ElMessage.error("更新备注失败");
  }
};

// 查看订单日志
const viewOrderLogs = async order => {
  try {
    const res = await getOrderLogs(order.id);
    if (res.code === 200) {
      currentOrderLogs.value = res.data || [];
      console.log("查看订单日志，订单ID:", order.id, "日志数据:", currentOrderLogs.value);
      showLogsModal.value = true;
    }
  } catch (error) {
    console.error("获取订单日志失败:", error);
    ElMessage.error("获取订单日志失败");
  }
};

// 初始化
onMounted(() => {
  getOrders();
  getStatistics();
});
</script>

<style scoped>
/* 响应式设计 */
@media (width <= 768px) {
  .stat-card {
    margin-bottom: 10px;
  }

  .search-form :deep(.el-form-item) {
    margin-bottom: 10px;
  }
}

.main {
  margin: 20px;
}

.stats-overview {
  margin-bottom: 24px;
}

.stat-card {
  display: flex;
  align-items: center;
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgb(0 0 0 / 10%);
}

.stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-right: 16px;
  font-size: 20px;
  color: white;
  border-radius: 8px;
}

.stat-content {
  flex: 1;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  line-height: 1;
  color: #303133;
}

.stat-label {
  margin-top: 4px;
  font-size: 14px;
  color: #909399;
}

.search-form {
  padding: 20px;
  margin-bottom: 16px;
  background: #f8f9fa;
  border-radius: 8px;
}

.batch-operations {
  margin-bottom: 16px;
}

.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
</style>
